<template>
<Form class="content" :labelWidth="140">
<Steps :current="vCurrent" direction="vertical" style="overflow-y: auto;height:95%;">
    <Step :title="$t(`compDesign.jProperty.actionParams`)" icon="md-list-box" status="process" @click.native="vCurrent=1">
        <template slot="content">
            <cfgEditTable :value="data.serviceParamList" :columns="serviceParamList" :showNum="false" 
                :addTpl="{isQuery: true, isHier: false, isEdit: false}"/>
            <FieldItem v-model="data.noUpdateSource" :config="{type: 'check' }"
                :formItemProps="{label: 'noUpdateSource'}"/>
        </template>
    </Step>
    <Step :title="$t(`compDesign.jProperty.operationResult`)" icon="md-done-all" status="process" @click.native="vCurrent=2">
        <template slot="content">
            <FieldItem v-model="data.objectName" :config="{type: 'select', options: groupOptions, clearable: true}"
                :formItemProps="{label: $t(`compDesign.jProperty.operationObj`)}"/>
            <FieldItem v-model="data.objectMethod" :config="{type: 'select', options: methodOptions, clearable: true}"
                :formItemProps="{label: $t(`compDesign.jProperty.objectMethod`)}"/>
            <FieldItem v-model="data.resDataKey" :config="{type: 'text', clearable: true}"
                :formItemProps="{label: $t(`compDesign.jProperty.resultField`)}"/>
        </template>
    </Step>
</Steps>
</Form>
</template>

<script>
    import storeVar from '../../../mixins/storeVar';
    export default {
        name: 'part-service-new',
        mixins: [storeVar],
        data () {
            return {
                vCurrent: 0,
                methodOptions: this.tools.getOptions(['queryData', 'setData', 'setVisible', 'updateData'])
            }
        },
        props: {
            data: {
                default() {
                    return []
                }
            },
            actionCascaderData: {
                default() {
                    return []
                }
            },
            eventMap: {
                default() {
                    return {}
                }
            },
        },
        computed: {
            eventItem() {
                return this.eventMap[this.data.action.join('_')]
            },
            paramsOptions() {
                let res = []
                if (this.data.action.length && this.eventItem) {
                    res = this.tools.getOptions(this.eventItem.event.params, 'name', 'name')
                }
                return res
            },
            backOptions() {
                let res = []
                if (this.data.action.length && this.eventItem) {
                    res = this.tools.getOptions(this.eventItem.event.back.state, 'name', 'name')
                }
                return res
            },
            groupOptions() {
                let res = []
                this.compGroup.classGroup.forEach(item => {
                    res.push({label: `${item.title}`, value: item.title})
                });
                return res;
            },
            serviceParamList() {
                return [
                    {
                        key: 'name',
                        title: this.$t(`compDesign.jProperty.name`),
                        elementName: 'fieldCell',
                        maxWidth: 180,
                        props: { config: { type: 'text', clearable: true } }
                    },
                    {
                        key: 'path',
                        title: this.$t(`compDesign.jProperty.varPath`),
                        elementName: 'fieldCell',
                        props: { config: { 
                            type: 'textarea', rows: 1, autosize: true, clearable: true,
                        } }
                    },
                    {
                        key: 'toJson',
                        width: 60,
                        title: 'toJson',
                        elementName: 'fieldCell',
                        props: { config: { type: 'check', clearable: true } }
                    },
                    {
                        key: 'isQuery',
                        width: 60,
                        title: 'query',
                        elementName: 'fieldCell',
                        props: { config: { type: 'check', clearable: true } }
                    },
                    {
                        key: 'isHier',
                        width: 70,
                        title: 'hierQuery',
                        elementName: 'fieldCell',
                        props: { config: { type: 'check', clearable: true } }
                    },
                    // {
                    //     key: 'isCondition',
                    //     width: 80,
                    //     title: 'condition',
                    //     elementName: 'fieldCell',
                    //     props: { config: { type: 'check', clearable: true } }
                    // },
                    {
                        key: 'isEdit',
                        width: 60,
                        title: 'edit',
                        elementName: 'fieldCell',
                        props: { config: { type: 'check', clearable: true } }
                    },
                    { slot: 'operation', }
                ]
            },
            backParamList() {
                return [
                    {
                        key: 'name',
                        title: this.$t(`compDesign.jProperty.name`),
                        elementName: 'fieldCell',
                        props: { config: { type: 'multiSelect', clearable: true, options: this.backOptions } }
                    },
                    {
                        key: 'value',
                        title: this.$t(`compDesign.jProperty.value`),
                        elementName: 'fieldCell',
                        props: { config: { type: 'text', clearable: true } }
                    },
                    { slot: 'operation', }
                ]
            },
        },
        methods: {
            actionChange(val) {
                if (val.length) {
                    this.data.serviceParamList = this.tools.lodash.cloneDeep(
                        this.eventItem.event.params.map(item => { return {name: item.name} })
                    )
                } else {
                    this.data.serviceParamList = []
                    this.data.backParamList = []
                }
            }
        }
    }
</script>

<style lang="less" scoped>
.content {
    /deep/ .ivu-step {
        cursor: pointer
    }
    /deep/ .c-formItem {
        margin-bottom: 4px;
    }
}
</style>